import React, { useState, useEffect } from 'react';
import { useMCPTool } from '../../hooks/useMCPTool.ts';
import NewsCard from '../../components/NewsCard.tsx';
import PolicyAnalysis from '../../components/PolicyAnalysis.tsx';
import './PolicyNewsPage.css';

interface NewsItem {
  id: string;
  title: string;
  source: string;
  date: string;
  summary: string;
  impact: string;
  relatedStocks: string[];
}

interface PolicyItem {
  id: string;
  title: string;
  department: string;
  date: string;
  content: string;
  analysis: string;
  investmentOpportunities: string[];
}

const PolicyNewsPage = () => {
  const [news, setNews] = useState<NewsItem[]>([]);
  const [policies, setPolicies] = useState<PolicyItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [selectedTab, setSelectedTab] = useState<'news' | 'policy'>('news');
  
  // 使用MCP工具获取政策与新闻数据
  const { data, loading: toolLoading, error: toolError } = useMCPTool('get_policy_news', {
    dateRange: '7d',
    categories: ['policy', 'financial', 'industry']
  });

  useEffect(() => {
    if (data) {
      // 处理从MCP工具返回的数据
      const processedNews = data.news?.map((item: any) => ({
        id: item.id,
        title: item.title,
        source: item.source,
        date: new Date(item.published_at).toLocaleDateString(),
        summary: item.summary,
        impact: item.impact_level,
        relatedStocks: item.related_stocks || []
      })) || [];

      const processedPolicies = data.policies?.map((item: any) => ({
        id: item.id,
        title: item.title,
        department: item.department,
        date: new Date(item.issued_at).toLocaleDateString(),
        content: item.content,
        analysis: item.analysis,
        investmentOpportunities: item.investment_opportunities || []
      })) || [];

      setNews(processedNews);
      setPolicies(processedPolicies);
      setLoading(false);
    }

    if (toolError) {
      setError('获取数据失败，请稍后重试');
      setLoading(false);
    }
  }, [data, toolError]);

  return (
    <div className="policy-news-container">
      <div className="tabs">
        <button 
          className={`tab-btn ${selectedTab === 'news' ? 'active' : ''}`}
          onClick={() => setSelectedTab('news')}
        >
          热点新闻
        </button>
        <button 
          className={`tab-btn ${selectedTab === 'policy' ? 'active' : ''}`}
          onClick={() => setSelectedTab('policy')}
        >
          政策解读
        </button>
      </div>

      {loading && <div className="loading">加载中...</div>}
      {error && <div className="error">{error}</div>}

      {selectedTab === 'news' && (
        <div className="news-list">
          {news.map(item => (
            <NewsCard 
              key={item.id}
              title={item.title}
              source={item.source}
              date={item.date}
              summary={item.summary}
              impact={item.impact}
              relatedStocks={item.relatedStocks}
            />
          ))}
        </div>
      )}

      {selectedTab === 'policy' && (
        <div className="policy-list">
          {policies.map(item => (
            <PolicyAnalysis
              key={item.id}
              title={item.title}
              department={item.department}
              date={item.date}
              content={item.content}
              analysis={item.analysis}
              opportunities={item.investmentOpportunities}
            />
          ))}
        </div>
      )}
    </div>
  );
};

export default PolicyNewsPage;